<template>
    <div>
        <img src="../assets/logo.jpg" alt="" class="logo">
        <div class="con">
            <div class="error">
                <img src="../assets/error.png" alt="">
            </div>
            <div class="dec">支付失败</div>
            <div class="pay">失败原因</div>

            <div class="btn">
                <button>完成</button>
            </div>
        </div>
        


    </div>
</template>

<script>
export default {
    name: "index",
    data() {
        return {
            msg: "Welcome to Your Vue.js App"
        };
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.logo {
    width: 39px;
    height: 52px;
    margin: 10px;
}
.con {
    margin: 100px auto;
    text-align: center
    
  
}

.con .error img{
    width: 80px;
    height: 80px;
}
.con .dec{
    margin-top: 10px;
    color:red;
}
.con .pay{
    font-size: 12px;
    margin-top: 10px;
}
.btn{
    width: 100px;
    height: 30px;
    border:1px solid #ccc;
    margin: 50px auto;
    line-height: 30px;
    text-align: center;
    border-radius: 5px;
}
.btn button{
    border:none;
    background: #fff;
    outline: none
}
</style>
